<template>
	<div class="app">
		<h1 ref="peiqi">欢迎学习Vue</h1>
		<button @click="showText">点我提示上方H1标签中的文字</button>
		<School ref="xuexiao"/>
		<button @click="test1">输出$refs.xuexiao</button>
		<hr>
		<Student ref="xuesheng"/>
		<button @click="test2">输出$refs.xuesheng @click="test1"</button>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student},
		methods: {
			showText(){
				console.log(this.$refs.peiqi.innerText)
			},
			test1(){
				console.log(this.$refs.xuexiao)
			},
			test2(){
				console.log(this.$refs.xuesheng)
			}
		},
	}
</script>

<style scoped>
	.app{
		background-color: skyblue;
		padding: 10px;
	}
</style>